<template>
	<view class="dSLComVue" :style="{'top':status_bar_height+'px'}">
		
		<view class="dSLComVueTop">
			<view class="search u-flex">
				<!-- @blur="onClickInput" -->
				<u-input class="searchipt" :clearable='false' type="text" v-model="search_input"
				         :placeholder="placeholder" />
				<view class="searchBtn" @click="onClickInputValueNoHis(search_input)">{{search_name?search_name:'搜索'}}</view>
			</view>
			<!-- <view class="dSLComVueTopLeft">
				<input  class="dSLComVueTopLeftInput" v-model="search_input" type="text" :placeholder="placeholder" @blur="onClickInput" />
				<view class="dSLComVueTopLeftDel" v-if="search_input" @click="onClickDel">
					<image src="/static/icon_img/del.png" class="dSLComVueTopLeftDelImg" style="width: 35rpx;height: 35rpx;flex: none;" ></image>
				</view>
			</view>
			<view class="dSLComVueTopRight">
				<view class="dSLComVueTopRightBtn" @click="onClickInput" >{{search_name?search_name:'搜索'}}</view>
			</view> -->
		</view>
	</view>
</template>


<script>
export default {
	data() {
		return {
			search_list_old: [],
			search_input: '',
			is_hot_show: true,
		}
	},
	created() {
		this._init_search()
		
	},
	props: {
		is_show_more: {
			value: Boolean,
			default: true
		},
		search_list_old_man_num: {
			value: Number,
			default: 10
		},
		search_list_hot: {
			value: Array,
			default: []
		},
		//HM修改 定义默认搜索关键词(水印文字)
		placeholder: {
			value: String,
			default: '请输入搜索内容'
		},
		store_key: {
			value: String,
			default: 'search_list'
		},
		
		color_border: {
			value: String,
			default: ''
		},
		color_text: {
			value: String,
			default: '#30c66c'
		},
		search_name: {
			value: String,
			default: '搜索'
		},
		input_text: {
			value: String,
			default: ''
		},
		type: {
			value: String,
			default: ''
		},
		status_bar_height:{
			value: String,
			default: ''
		}
	},
	watch: {
		search_list_hot(newVal) {
			if (newVal) {
				this.search_list_hot = newVal
			}
		},
		input_text(newVal) {
			if (newVal) {
				this.search_input = newVal
				// this.search_input = search_input.toLowerCase()
				
				this.saveKeyword()
			}
		},
		
	},
	methods: {
		onClickInput() {
			uni.setStorageSync("searchVal", this.search_input);
			uni.navigateTo({
				url: '/pages/index/seach/searchResult?type=' +
					this.type
			})
			this.saveKeyword()
		},
		onClickInputValueNoHis(search_input) {
			this.$emit('onSearchNameApi', this.search_input);
		},
		onClickInputValue(search_input) {
			this.saveKeyword()
			
		},
		_init_search() {
			var that = this
			
			var store_key = that.store_key
			
			uni.getStorage({
				key: store_key,
				success: (res) => {
					var old_data = JSON.parse(res.data);
					
					that.search_list_old = old_data; //更新历史搜索
					
					
					// console.log('____________________dev')
					// console.log(that.search_list_old)
					// console.log('____________________dev')
				}
			});
		},
		saveKeyword() {
			var that = this
			
			// console.log('搜索的名称为：'+this.search_input)
			
			var search_input = this.search_input
			
			var store_key = that.store_key
			uni.getStorage({
				key: store_key,
				success: (res) => {
					var old_data = JSON.parse(res.data);
					var findIndex = old_data.indexOf(search_input);
					if (findIndex == -1) {
						old_data.unshift(search_input);
					} else {
						old_data.splice(findIndex, 1);
						old_data.unshift(search_input);
					}
					//最多10个纪录
					old_data.length > that.search_list_old_man_num && old_data.pop();
					uni.setStorage({
						key: store_key,
						data: JSON.stringify(old_data)
					});
					that.search_list_old = old_data; //更新历史搜索
					
					
					// console.log('____________________dev')
					// console.log(that.search_list_old)
					// console.log('____________________dev')
				},
				fail: (e) => {
					var old_data = [search_input];
					uni.setStorage({
						key: store_key,
						data: JSON.stringify(old_data)
					});
					that.search_list_old = old_data; //更新历史搜索
					// console.log('____________________dev')
					// console.log(that.search_list_old)
					// console.log('____________________dev')
				}
			});
			//	向父级发送搜索的事件
			that.$emit('onSearchNameApi', this.search_input);
			//
		},
		onClickDel() {
			this.search_input = ''
			this.$emit('onSearchNameApi', '');
		},
		
		onClickDelAll() {
			var that = this
			console.log('---全部删除-log--')
			uni.showModal({
				title: '提示',
				content: '确定全部删除',
				success(res) {
					if (res.confirm) {
						uni.removeStorageSync(that.store_key)
						that.search_list_old = []
						// console.log('______清除全部搜索记录______向上级发送事件')
						that.$emit('onClickDelAllApi', '');
					}
				}
			})
		},
		//
		onClickShowHot() {
			this.is_hot_show = this.is_hot_show == true ? false : true
		}
	}
}
</script>

<style lang="scss">
page {
	background: #fff;
}

.myborder {
	// border: 1rpx solid #60DF9D;
	// color: #30c66c;
}

.mytext {
	color: #8799a3;
}

.dSLComVue {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10rpx 0 20rpx;
	position: fixed;
	z-index: 1000;
	background:#fff;
	.search {
		width: 100%;
		margin: 0 auto;
		height: 74rpx;
		background: #f5f5f5;
		border-radius: 37rpx;
		border: 1rpx solid #e5e5e5;
		margin-top: 20rpx;
		padding-left: 33rpx;
		padding-right: 10rpx;
		justify-content: space-between;
		
		.searchipt {
			font-size: 28rpx;
			// color: #999;
		}
		
		.searchBtn {
			width: 118rpx;
			height: 55rpx;
			background: #ED861F;
			border-radius: 28rpx;
			color: #fff;
			font-size: 26rpx;
			text-align: center;
			line-height: 55rpx;
		}
	}
	
	.viewline {
		width: 100%;
		height: 12rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
	}
	
	.sviewline {
		width: 100%;
		height: 1rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
	}
	
	.dSLComVueTop {
		width: 90%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 40rpx;
		
		.dSLComVueTopLeft {
			flex: 1;
			height: 60rpx;
			background-color: #e8e8e8;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 3%;
			// background-color: #ccc;
			border: 1rpx solid #f2f2f2;
			
			.dSLComVueTopLeftImg {
				flex: 1;
				height: 80rpx;
			}
			
			.dSLComVueTopLeftInput {
				flex: 1;
				height: 60rpx;
				padding: 0 20rpx;
				
			}
			
			.dSLComVueTopLeftDel {
				width: 70rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
		
		.dSLComVueTopRight {
			width: 100rpx;
			margin-left: 30rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			.dSLComVueTopRightBtn {
				width: 120rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: #ED861F;
				color: #fff;
				font-size: 14px;
				// color: red;
				display: flex;
				// color: #ff00ff;
				// border:1rpx solid #ff00ff;
				align-items: center;
				justify-content: center;
			}
		}
		
	}
	
	.dSLComVueTitle {
		width: 100%;
		height: 80rpx;
		display: flex;
		font-weight: 600;
		font-size: 26rpx;
		align-items: center;
		// background-color: #30c66c;
		align-items: center;
		justify-content: space-between;
		padding-left: 5%;
	}
	
	.dSLComVueLog {
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		
		.dSLComVueLogBox {
			line-height: 55rpx;
			background-color: #e8e8e8;
			padding: 0rpx 30rpx;
			border-radius: 30rpx;
			flex: none;
			margin: 10rpx 25rpx 15rpx 0;
			// border: 1rpx solid #ccc
		}
		
		
	}
}
</style>
